var viewer = null;
var pan_amt = 0.05;
var lo_res = false;
//var res_img;

function init() {
  viewer = new Seadragon.Viewer("container");
  //setGraphics(mobile);
  viewer.addControl(makeTagBar(), Seadragon.ControlAnchor.NONE);
  viewer.addControl(makeNavControl(), Seadragon.ControlAnchor.BOTTOM_LEFT);
  viewer.addControl(makeLoGraphicsControl(), Seadragon.ControlAnchor.TOP_RIGHT);
  viewer.addEventListener("animation", onZoomed);
  //viewer.addEventListener("open", addLocations);
  
  var container = document.getElementById("container");
  
  setSeadragonImage((typeof(stitchid) != 'undefined') ? stitchid : 1, container.attributes["src"].value);
}

function setSeadragonImage(stitchid, dzi) {
	viewer.openDzi(dzi);
	
	var xmlHttp;
	try {// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();		
	} catch (e) {// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				return false;
			}
		}
	}
	
	xmlHttp.onreadystatechange = function(){
		if (xmlHttp.readyState == 4)
			document.getElementById("tagstrip").innerHTML = xmlHttp.responseText;
	}
	
	xmlHttp.open("GET", "scripts/tag_table.php?stitchid=" + stitchid, true);
	xmlHttp.send(null);
	
}

function makeLoGraphicsControl() {
	return makeButtonLink("graphicsbtn", "style/lo-graphics.png", onGraphicsClick);
}

function makeTagBar(){
	
	var strip = document.createElement("div");
	strip.className = "tagstrip";
	strip.id = "tagstrip";
	
	return strip;
	
}

function makeNavControl() {
  var tbl = document.createElement("table");
  
  var r1 = document.createElement("tr");
  var r1c1 = document.createElement("td");
  var r1c2 = document.createElement("td");
  var r1c3 = document.createElement("td");
  
  var r2 = document.createElement("tr");
  var r2c1 = document.createElement("td");
  var r2c2 = document.createElement("td");
  var r2c3 = document.createElement("td");
  
  var r3 = document.createElement("tr");
  var r3c1 = document.createElement("td");
  var r3c2 = document.createElement("td");
  var r3c3 = document.createElement("td");
  
  tbl.appendChild(r1);
  tbl.appendChild(r2);
  tbl.appendChild(r3);
  
  r1.appendChild(r1c1);
  r1.appendChild(r1c2);
  r1.appendChild(r1c3);
  
  r2.appendChild(r2c1);
  r2.appendChild(r2c2);
  r2.appendChild(r2c3);
  
  r3.appendChild(r3c1);
  r3.appendChild(r3c2);
  r3.appendChild(r3c3);
  
  r2c1.appendChild(makeButtonLink("westbutton", "style/nav-west.png", onWestClick));
  r1c2.appendChild(makeButtonLink("northbutton", "style/nav-north.png", onNorthClick));
  r3c2.appendChild(makeButtonLink("southbutton", "style/nav-south.png", onSouthClick));
  r2c3.appendChild(makeButtonLink("eastbutton", "style/nav-east.png", onEastClick));
  return tbl;
}

function makeButtonLink(id, imgname, clickevent) {
  var btnbox = document.createElement("div");
  var btnlink = document.createElement("a");
  var btnimg = document.createElement("img");
  btnbox.id = id;
  btnbox.appendChild(btnlink);
  btnlink.href = "#"; // so browser shows it as link
  btnlink.appendChild(btnimg);
  btnimg.src = imgname;
  Seadragon.Utils.addEvent(btnlink, "click", clickevent);
  return btnbox;
}

function addLocations() { // add some examples
  for(var x=0; x<20; x++) {
    newLocation("style/camera.png", Math.random(), Math.random()/2, onLocClick);
  }
}

function newLocation(imgname, x, y, clickevent){
  var linkdiv = document.createElement("div");
  var lnk = document.createElement("a");
  var img = document.createElement("img");
  img.src = imgname;
  lnk.appendChild(img);
  lnk.href = "#";  
  linkdiv.className = "imgpin";
  linkdiv.appendChild(lnk);
  if(viewer.viewport.getZoom() < 5) {
    linkdiv.style.visibility = "hidden";
  }
  var point = new Seadragon.Point(x, y);                
  var placement = Seadragon.OverlayPlacement.BOTTOM;
  Seadragon.Utils.addEvent(lnk, "click", clickevent);
  viewer.drawer.addOverlay(linkdiv, point, placement);
}

function setGraphics(off) {
  lo_res = off;
  var res_img = document.getElementById("graphicsbtn");
  if(off) {
    Seadragon.Config.animationTime = 0;
    Seadragon.Config.autoHideControls = false;
    Seadragon.Config.blendTime = 0;
    Seadragon.Config.springStiffness = 0;
    Seadragon.Config.immediateRender = true;
    if(res_img != null) {
      res_img.src = "style/hi-graphics.png";
    } 
  } else {
    Seadragon.Config.animationTime = 1.5;
    Seadragon.Config.autoHideControls = true;
    Seadragon.Config.blendTime = 0.5;   
    Seadragon.Config.springStiffness = 5;
    Seadragon.Config.immediateRender = false;  
    if(res_img != null) {
      res_img.src = "style/lo-graphics.png";
    } 
  }
}

/// EVENTS .........................................................................

function onLocClick(event) {
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  //viewer.openDzi('http://content.seadragon.com/content/images/EarthCityLights.dzi','<Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Size Width="29566" Height="14321"/></Image>');
  alert("change image!!!");
}

function onGraphicsClick(event){
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  setGraphics(!lo_res);
}

function onEastClick(event) {
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  viewer.viewport.panBy(new Seadragon.Point(pan_amt, 0));
}

function onWestClick(event) {
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  viewer.viewport.panBy(new Seadragon.Point(-pan_amt, 0));
}

function onNorthClick(event) {
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  viewer.viewport.panBy(new Seadragon.Point(0, -pan_amt));
}

function onSouthClick(event) {
  Seadragon.Utils.cancelEvent(event); // don't process link
  
  if (!viewer.isOpen()) {
    return;
  }
  
  viewer.viewport.panBy(new Seadragon.Point(0, pan_amt));
}

Seadragon.Utils.addEvent(window, "load", init);

function onZoomed() {
  var zoom = viewer.viewport.getZoom();
  pan_amt = 0.05 / zoom;
  
  var pins = document.getElementsByTagName("div");
  for(var x=0;x<pins.length;x++) {
    var pin = pins[x];
    if(pin.className == "imgpin") {
      if(zoom < 3) {
        pin.style.visibility = "hidden";
      } else {
        pin.style.visibility = "visible";
      }
    }
  }
}